import React, { Component, createRef } from 'react'
import { Row, Col, Form, Icon, Input, Button, Upload, Radio } from 'antd'
import E from 'wangeditor'

const formItemLayout = {
  labelCol: { span: 0 },
  wrapperCol: { span: 24 }
}
@Form.create()
export default class UserEdit extends Component {
  constructor(props) {
    super()
    this.state = {
      user: 'ajax',
      descHtml: '请你简单的介绍下自己吧！'
    }
    this.editorDom = createRef()
  }
  componentDidMount() {
    this.props.form.setFieldsValue({
      userName: this.state.user
    })
    this.initWangeditor()
  }
  initWangeditor() {
    this.editor = new E(this.editorDom.current)
    this.editor.customConfig.onchange = descHtml => {
      this.setState({
        descHtml
      })
    }
    this.editor.create()
    this.editor.txt.html(this.state.descHtml)
  }
  handleSubmit = e => {
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values)
      }
    })
  }

  validateUser = (rule, value, callback) => {
    console.log(rule, value)
    callback()
  }
  normFile = e => {
    console.log('Upload event:', e)
    if (Array.isArray(e)) {
      return e
    }
    return e && e.fileList
  }
  render() {
    const { getFieldDecorator } = this.props.form
    return (
      <Row getter={24} justify="center" type="flex">
        <Col span={18}>
          <Form onSubmit={this.handleSubmit} className="login-form">
            <Form.Item label="用户名" {...formItemLayout}>
              {getFieldDecorator('userName', {
                rules: [
                  {
                    required: true,
                    whitespace: true,
                    message: '请输入用户名'
                  },
                  {
                    max: 10,
                    message: '用户名最多10位'
                  },
                  {
                    min: 4,
                    message: '用户名最少2位'
                  },
                  {
                    validator: this.validateUser
                  }
                ]
              })(
                <Input prefix={<Icon type="user" />} placeholder="Username" />
              )}
            </Form.Item>

            <Form.Item label="年龄" {...formItemLayout}>
              {getFieldDecorator('age', {
                rules: [
                  {
                    required: true,
                    validator: (rule, value, cb) => {
                      const v = parseInt(value, 10)
                      if (!v) {
                        cb('请输入数字')
                      } else if (v < 18 || v > 55 || Number(value) !== v) {
                        cb('工作年龄应该是在18到55岁的正整数')
                      } else {
                        cb()
                      }
                    }
                  }
                ]
              })(<Input prefix={<Icon type="contacts" />} placeholder="age" />)}
            </Form.Item>

            <Form.Item label="性别:" {...formItemLayout}>
              {getFieldDecorator('gender', { initialValue: 'M' })(
                <Radio.Group>
                  <Radio value="M">男</Radio>
                  <Radio value="F">女</Radio>
                </Radio.Group>
              )}
            </Form.Item>

            <Form.Item label="地址" {...formItemLayout}>
              {getFieldDecorator('address', {
                rules: [
                  {
                    required: true,
                    whitespace: true,
                    message: '地址'
                  }
                ]
              })(<Input prefix={<Icon type="home" />} placeholder="address" />)}
            </Form.Item>

            <Form.Item label="职位:" {...formItemLayout}>
              {getFieldDecorator('position')(
                <Radio.Group>
                  <Radio.Button value="a">管理员</Radio.Button>
                  <Radio.Button value="b">经理</Radio.Button>
                  <Radio.Button value="c">普通用户</Radio.Button>
                </Radio.Group>
              )}
            </Form.Item>

            <Form.Item
              label="上传"
              extra="请选择你需要上传的文件"
              {...formItemLayout}
            >
              {getFieldDecorator('上传文件', {
                valuePropName: 'fileList',
                getValueFromEvent: this.normFile
              })(
                <Upload name="logo" action="/upload.do" listType="picture">
                  <Button>
                    <Icon type="upload" /> 点击上传
                  </Button>
                </Upload>
              )}
            </Form.Item>

            <Form.Item label="图文介绍:" {...formItemLayout}>
              {getFieldDecorator('desc', { initialValue: this.state.descHtml })(
                <div className="refDom" ref={this.editorDom} />
              )}
            </Form.Item>

            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                className="login-form-button"
              >
                修改
              </Button>
              <Button className="login-form-button">取消</Button>
            </Form.Item>
          </Form>
        </Col>
      </Row>
    )
  }
}
